<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- ( .? ) - 链式判断运算符 -->
    <!-- ( ?? ) - null判断运算符 -->
    <!-- ( ||= , &&= , ??= ) - 逻辑赋值运算符 -->
    <script>
        /*       
            obj?.prop // 对象属性是否存在
            obj?.[expr] // 同上
            func?.(...args) // 函数或对象方法是否存在 
        */
        const obj = { person: { name: { firstName: null } } };
        // obj.person.name.firstName = 'haha';
        const firstName1 = (obj && obj.person && obj.person.name && obj.person.name.firstName) || 'default1';
        const firstName2 = obj?.person?.name?.firstName || 'default2';
        const firstName3 = obj?.person?.name?.firstName ?? 'default3';
       // x ||= y 等同于 x || (x = y)
        obj.person.name.firstName ||= 'default4';
        obj.person.name.firstName &&= 'default4';
        obj.person.name.firstName ??= 'default4';
        const { firstName: firstName4 } = obj.person.name;
        console.log(firstName1, firstName2, firstName3, firstName4);
    </script>
</body>

</html>